<template>
    <div class="search-wrap">
        <div class="search-bg">
            <div class="search-cover ">
                <el-input
                    placeholder="搜索音乐、MV、歌单、歌手"
                    ref="input"
                    v-model="keyword"
                    v-on:keyup.enter="search"
                    suffix-icon="el-icon-search"
                >
                </el-input>
            </div>
        </div>
        <div class="main container">
            <div class="tab flex-between">
                <h2>搜索结果</h2>
                <ul
                    v-for="(item, index) in navList"
                    :key="index"
                >
                    <li
                        :class="type == item.id ? 'active' : ''"
                        @click="changeType(item.id)"
                    >{{ item.name }}</li>
                </ul>
            </div>
            <div class="main">
                <!-- 歌曲列表 -->
                <artist-list
                    :songs="songs"
                    v-if="type == 1"
                    v-loading="loading"
                    element-loading-background="#fff"
                />
                <!-- 歌手列表 -->
                <ul
                    class="singer-list"
                    v-if="type === 100"
                    v-loading="loading"
                    element-loading-background="#fff"
                >
                    <singer-item
                        v-for="item of singers"
                        :key="item.id"
                        :item="item"
                        v-loading="loading"
                        element-loading-background="#fff"
                    />
                </ul>
                <!-- 专辑列表 -->
                <album-list
                    :albums="albums"
                    v-if="type == 10"
                    v-loading="loading"
                    element-loading-background="#fff"
                />
                <!-- 视频列表 -->
                <mv-list
                    :mvs="videos"
                    v-if="type == 1014"
                    v-loading="loading"
                    element-loading-background="#fff"
                ></mv-list>
                <!-- 歌单列表 -->
                <song-sheet
                    :sheetList="playList"
                    v-if="type == 1000"
                    v-loading="loading"
                    element-loading-background="#fff"
                ></song-sheet>
            </div>
        </div>
    </div>
</template>

<script>
import { createSong } from '@/model/song'
import { createVideo } from '@/model/video'

import ArtistList from '@/components/common/artistList/Index'
import SingerItem from '@/components/common/singerItem/Index'
import AlbumList from '@/components/common/albumList/Index'
import MvList from '@/components/common/mvList/Index'
import songSheet from '@/components/common/songSheet/Index'
export default {
    data() {
        return {
            keyword: '',
            // 模块
            navList: [
                {
                    name: '单曲',
                    id: 1
                },
                {
                    name: '歌手',
                    id: 100
                },
                {
                    name: '专辑',
                    id: 10
                },
                {
                    name: '视频',
                    id: 1014
                },
                {
                    name: '歌单',
                    id: 1000
                }
            ],
            // 搜索结果
            searchResult: {},
            // 当前显示模块
            type: 1,
            // 分页显示条数
            limit: 30,
            // 分页偏移
            offset: 0,
            isPerson: true,
            // 歌曲列表
            songs: [],
            // 歌手列表
            singers: [],
            // 专辑
            albums: [],
            // 视频
            videos: [],
            // 歌单
            playList: [],
            loading: false
        }
    },
    components: {
        ArtistList,
        SingerItem,
        AlbumList,
        MvList,
        songSheet

    },
    created() {
        let keyword = this.$route.query.keyword
        this.keyword = keyword
        this.search(this.type)
    },
    watch: {
        // 监听keyword值的变化
        $route(newObj, oldObj) {
            if (newObj.query.keyword !== oldObj.query.keyword) {
                this.keyword = newObj.query.keyword
                this.search(this.type)
            }
        }
    },
    methods: {
        // 更改搜索类型
        changeType(type) {
            this.type = type
            this.search(type)
        },
        // 搜索
        async search(type) {
            this.loading = true

            const { data: res } = await this.$api.search(this.keyword, this.limit, this.offset, type)
            if (res.code !== 200) {
                return this.message.error('获取搜索结果失败！');
            }
            console.log(res);
            switch (type) {
                case 1: {
                    let lists = res.result.songs
                    let sliceArr = []
                    lists.map(item => {
                        sliceArr.push(item.id)
                    })
                    this.getSongDetail(sliceArr)
                    break
                }
                case 100: {
                    this.singers = res.result.artists
                    break
                }
                case 10: {
                    this.albums = res.result.albums
                    break
                }
                case 1014: {
                    this.videos = this._normalizeVideos(res.result.videos)
                    console.log(res.result);
                    break
                }
                case 1000: {
                    this.playList = res.result.playlists
                    break
                }
                default: {
                    let lists = res.result.songs
                    let sliceArr = []
                    lists.map(item => {
                        sliceArr.push(item.id)
                    })
                    this.getSongDetail(sliceArr)
                    break
                }
            }
            this.loading = false

        },
        // 获取歌曲列表
        async getSongDetail(sliceArr) {
            let timestamp = new Date().valueOf()
            let ids = sliceArr.join(',')
            const { data: beforeRes } = await this.$api.getSongDetail(ids, timestamp)
            const res = beforeRes.songs
            // console.log(res);
            this.songs = this._normalizeSongs(res)
        },
        // 处理歌曲
        _normalizeSongs(list) {
            let ret = []
            list.map(item => {
                if (item.id) {
                    ret.push(createSong(item))
                }
            })
            return ret
        },
        // 处理视频
        _normalizeVideos(list) {
            let ret = []
            list.map(item => {
                if (item.vid) {
                    ret.push(
                        createVideo({
                            id: item.vid,
                            nickName: item.creator.nickname,
                            name: item.title,
                            playCount: item.playTime,
                            duration: item.durationms,
                            image: item.coverUrl,
                            isLive: false
                        })
                    )
                }
            })
            return ret
        }

    }
}
</script>

<style lang="less" scoped>
.search-wrap {
    .search-bg {
        width: 100%;
        height: 240px;
        background-image: url("../../assets/images/personal.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        .search-cover {
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            border-radius: 6px;
        }
    }
    .main {
        margin: 30px 0;
        .tab {
            width: 450px;
            h2 {
                font-size: 22px;
                font-weight: 600;
                line-height: 30px;
                margin-right: 40px;
            }
            ul {
                height: 25px;
                li {
                    cursor: pointer;
                    padding-bottom: 3px;
                }
                .active {
                    color: #fa2800;
                    border-bottom: 2px solid #fa2800;
                }
            }
        }
        .singer-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 50px;
            margin: 0px -15px 0;
            min-width: 1080px;
        }
    }
}
</style>